/**
 * 交易详情页面组件
 * 用于展示特定交易的详细信息，包括交易状态、商品信息、用户信息等，并提供交易操作和评价功能
 */

import React, { useEffect, useState } from 'react'
// 引入antd组件库中的相关组件
import { Card, Row, Col, Tag, Button, message, Spin, Avatar, Empty, Modal, Form, Input, Space, Descriptions, Timeline, Rate, Pagination, Divider, Checkbox } from 'antd'
// 引入antd图标库中的相关图标
import { UserOutlined, ShoppingCartOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons'
// 引入路由参数和导航钩子
import { useParams, useNavigate } from 'react-router-dom'
// 引入获取交易详情、更新交易状态和取消交易的API服务
import { getTradeById, updateTradeStatus, cancelTrade } from '../services/api'
// 引入用户认证状态管理库
import { useAuthStore } from '@stores/auth'
// 引入antd的Modal组件
import { Modal as AntdModal } from 'antd'
const { TextArea } = Input;


// 定义交易状态映射对象，包含状态颜色、文本和图标
const statusMap = {
  pending_payment: { color: 'orange', text: '待付款', icon: <ShoppingCartOutlined /> },
  paid: { color: 'blue', text: '已付款', icon: <CheckCircleOutlined /> },
  shipped: { color: 'purple', text: '已发货', icon: <CheckCircleOutlined /> },
  delivered: { color: 'cyan', text: '已送达', icon: <CheckCircleOutlined /> },
  completed: { color: 'green', text: '已完成', icon: <CheckCircleOutlined /> },
  cancelled: { color: 'red', text: '已取消', icon: <CloseCircleOutlined /> },
  refunded: { color: 'gray', text: '已退款', icon: <CloseCircleOutlined /> }
}

// 定义交易状态流转映射对象，决定每个状态下可执行的操作
const statusFlows = {
  // 买家在待付款状态下可执行“确认付款”
  'paid': ['pending_payment'],
  // 卖家在已付款状态下可执行“确认发货”
  'shipped': ['paid'],
  // 买家在已发货状态下可执行“确认收货”
  'delivered': ['shipped'],
  // 买家在已发货或已送达状态下可执行“确认完成”
  'completed': ['delivered', 'shipped'],
  // 买家或卖家在待付款或已付款状态下可执行“取消交易”
  'cancelled': ['pending_payment', 'paid'],
}

// 定义商品成色映射对象，包含成色文本和颜色
const CONDITION_MAP = {
  new: { text: '全新', color: 'green' },
  like_new: { text: '几乎全新', color: 'blue' },
  good: { text: '良好', color: 'cyan' },
  fair: { text: '一般', color: 'orange' },
  poor: { text: '较差', color: 'red' }
}

/**
 * 交易详情页面组件
 */
function TradeDetailPage() {
  // 获取路由参数中的交易ID
  const { id } = useParams()
  // 获取路由导航函数
  const navigate = useNavigate()
  // 获取用户认证状态和用户信息
  const { isAuthenticated, user } = useAuthStore()
  // 定义状态变量loading，用于控制页面加载状态，初始值为true
  const [loading, setLoading] = useState(true)
  // 定义状态变量trade，用于存储交易详情，初始值为null
  const [trade, setTrade] = useState(null)
  // 定义状态变量actionModalVisible，用于控制操作确认弹窗的显示状态，初始值为false
  const [actionModalVisible, setActionModalVisible] = useState(false)
  // 定义状态变量actionLoading，用于控制操作确认弹窗中的加载状态，初始值为false
  const [actionLoading, setActionLoading] = useState(false)
  // 定义状态变量currentAction，用于存储当前要执行的操作，初始值为空字符串
  const [currentAction, setCurrentAction] = useState('')
  // 使用Form.useForm()创建操作表单实例
  const [actionForm] = Form.useForm()

  // 评价相关状态
  // 定义状态变量myEvaluation，用于存储用户对对方的评价，初始值为null
  const [myEvaluation, setMyEvaluation] = useState(null)
  // 定义状态变量otherEvaluation，用于存储对方对用户的评价，初始值为null
  const [otherEvaluation, setOtherEvaluation] = useState(null)
  // 定义状态变量historyEvaluations，用于存储对方的历史评价列表，初始值为[]
  const [historyEvaluations, setHistoryEvaluations] = useState([])
  // 定义状态变量historyTotal，用于存储对方历史评价的总数，初始值为0
  const [historyTotal, setHistoryTotal] = useState(0)
  // 定义状态变量historyPage，用于存储历史评价的当前页码，初始值为1
  const [historyPage, setHistoryPage] = useState(1)
  // 定义状态变量evalLoading，用于控制评价部分的加载状态，初始值为false
  const [evalLoading, setEvalLoading] = useState(false)
  // 使用Form.useForm()创建评价表单实例
  const [evalForm] = Form.useForm()

  // 使用useEffect钩子，在交易ID、用户认证状态或导航函数改变时调用fetchTrade函数获取交易详情
  useEffect(() => {
    if (!isAuthenticated) {
      // 若用户未认证，显示错误消息并跳转到登录页面
      message.error('请先登录')
      navigate('/login')
      return
    }
    fetchTrade()
  }, [id, isAuthenticated, navigate])

  /**
   * 获取交易详情的异步函数
   * 调用getTradeById API获取指定交易的详细信息
   */
  const fetchTrade = async () => {
    try {
      // 设置加载状态为true
      setLoading(true)
      // 调用API获取交易详情
      const response = await getTradeById(id)
      // 如果API返回成功
      if (response.data.success) {
        // 更新交易详情状态
        setTrade(response.data.data.trade)
      } else {
        // 若失败，将交易详情设置为null
        setTrade(null)
      }
    } catch (error) {
      // 若出现错误，打印错误信息并显示错误消息
      console.error('获取交易详情失败:', error)
      message.error('获取交易详情失败')
      // 将交易详情设置为null
      setTrade(null)
    } finally {
      // 无论成功或失败，都将加载状态设置为false
      setLoading(false)
    }
  }

  // 使用useEffect钩子，在交易详情或用户信息改变时调用fetchTradeEvaluations和fetchHistoryEvaluations函数获取评价信息
  useEffect(() => {
    if (trade && user) {
      fetchTradeEvaluations()
      fetchHistoryEvaluations()
    }
    // eslint-disable-next-line
  }, [trade, user, historyPage])

  /**
   * 获取本交易评价的异步函数
   * 调用API获取当前交易的互评信息
   */
  const fetchTradeEvaluations = async () => {
    try {
      // 设置评价加载状态为true
      setEvalLoading(true)
      // 调用API获取当前交易的评价信息
      const res = await apiClient.get(`/api/evaluations?trade_id=${trade.id}`)
      // 如果API返回成功
      if (res.data.success) {
        const evals = res.data.data.evaluations
        console.log('后端返回的评价数据:', evals, user.id);
        // 更新用户对对方的评价状态
        setMyEvaluation(evals.find(e => String(e.evaluator_id) === String(user.id)) || null)
        // 更新对方对用户的评价状态
        setOtherEvaluation(evals.find(e => String(e.evaluated_id) === String(user.id)) || null)
      }
    } catch (e) { /* 忽略 */ } finally { 
      // 无论成功或失败，都将评价加载状态设置为false
      setEvalLoading(false) 
    }
  }
  /**
   * 获取对方历史评价的异步函数
   * 调用API获取对方的历史评价信息
   */
  const fetchHistoryEvaluations = async () => {
    try {
      // 设置评价加载状态为true
      setEvalLoading(true)
      // 获取对方用户ID
      const otherId = isBuyer ? trade.seller_id : trade.buyer_id
      // 调用API获取对方的历史评价信息
      const res = await apiClient.get(`/api/evaluations?user_id=${otherId}&page=${historyPage}&limit=5`)
      // 如果API返回成功
      if (res.data.success) {
        // 更新对方历史评价列表状态
        setHistoryEvaluations(res.data.data.evaluations)
        // 更新对方历史评价总数状态
        setHistoryTotal(res.data.data.pagination.totalItems)
      }
    } catch (e) { /* 忽略 */ } finally { 
      // 无论成功或失败，都将评价加载状态设置为false
      setEvalLoading(false) 
    }
  }
  /**
   * 提交评价的异步函数
   * 调用API提交用户对对方的评价信息
   * @param {Object} values - 评价表单提交的值，包含综合评分、评价内容和是否匿名
   */
  const handleEvalSubmit = async (values) => {
    try {
      // 设置评价加载状态为true
      setEvalLoading(true)
      // 调用API提交评价信息
      await apiClient.post('/api/evaluations', {
        trade_id: trade.id,
        evaluator_id: user.id,
        evaluated_id: isBuyer ? trade.seller_id : trade.buyer_id,
        overall_score: values.overall_score,
        comment: values.comment,
        is_anonymous: values.is_anonymous || false
      })
      // 显示评价提交成功消息
      message.success('评价提交成功')
      // 仅买家评价时自动将交易状态设为已完成
      if (isBuyer) {
        await updateTradeStatus(trade.id, { status: 'completed' });
        // 刷新交易信息
        fetchTrade(); 
      }
      // 自动刷新本次评价
      fetchTradeEvaluations(); 
      // 自动刷新历史评价
      fetchHistoryEvaluations(); 
      // 重置评价表单字段
      evalForm.resetFields(); 
    } catch (e) {
      // 若出现错误，显示评价提交失败消息
      message.error('评价提交失败')
    } finally {
      // 无论成功或失败，都将评价加载状态设置为false
      setEvalLoading(false)
    }
  }

  /**
   * 处理交易操作的函数
   * 显示操作确认弹窗并设置当前操作
   * @param {string} action - 要执行的操作
   */
  const handleAction = (action) => {
    // 设置当前操作
    setCurrentAction(action)
    // 显示操作确认弹窗
    setActionModalVisible(true)
    // 重置操作表单字段
    actionForm.resetFields()
  }

  /**
   * 处理操作确认提交的异步函数
   * 根据当前操作调用相应的API更新交易状态或取消交易
   * @param {Object} values - 操作表单提交的值，包含备注信息
   */
  const handleActionSubmit = async (values) => {
    try {
      // 设置操作加载状态为true
      setActionLoading(true)
      
      if (currentAction === 'cancel') {
        // 若当前操作是取消交易，调用cancelTrade API
        await cancelTrade(id, { reason: values.reason })
        // 显示交易已取消消息
        message.success('交易已取消')
      } else {
        // 若当前操作是更新交易状态，调用updateTradeStatus API
        await updateTradeStatus(id, { 
          status: currentAction, 
          reason: values.reason 
        })
        // 显示交易状态更新成功消息
        message.success('交易状态更新成功')
      }
      
      // 隐藏操作确认弹窗
      setActionModalVisible(false)
      // 重新获取交易信息
      fetchTrade() 
    } catch (error) {
      // 增强兼容性，输出error对象便于调试
      console.error('操作失败:', error, error?.response?.data);
      // 尝试多种方式获取后端返回的错误信息
      let errMsg = '';
      if (error?.response?.data?.message) {
        errMsg = error.response.data.message;
      } else if (error?.response?.data) {
        errMsg = JSON.stringify(error.response.data);
      } else if (error?.message) {
        errMsg = error.message;
      } else {
        errMsg = '操作失败';
      }
      if (typeof errMsg !== 'string') errMsg = String(errMsg);
      if (errMsg.includes('余额不足')) {
        // 若错误信息包含余额不足，显示确认弹窗
        AntdModal.confirm({
          title: '余额不足',
          content: '余额不足，请先充值后再支付。',
          okText: '去充值',
          cancelText: '取消',
          onOk: () => {
            // 点击去充值按钮，跳转到钱包页面
            navigate('/wallet')
          }
        });
        return;
      }
      // 显示错误消息
      message.error(errMsg);
    } finally {
      // 无论成功或失败，都将操作加载状态设置为false
      setActionLoading(false)
    }
  }

  /**
   * 判断是否可以执行某个操作的函数
   * 根据交易状态和用户身份判断是否可以执行指定操作
   * @param {string} action - 要执行的操作
   */
  const canPerformAction = (action) => {
    if (!trade || !user) return false
    
    // 判断用户是否为买家
    const isBuyer = trade.buyer_id === user.id
    // 判断用户是否为卖家
    const isSeller = trade.seller_id === user.id
    
    // 检查状态流转
    if (!statusFlows[action]?.includes(trade.status)) return false
    
    // 检查权限
    switch (action) {
      case 'paid':
      case 'completed':
        return isBuyer
      case 'shipped':
        return isSeller
      case 'cancelled':
        return isBuyer || isSeller
      default:
        return false
    }
  }

  /**
   * 获取操作按钮文本的函数
   * 根据操作名称返回对应的按钮文本
   * @param {string} action - 操作名称
   */
  const getActionButtonText = (action) => {
    const actionTextMap = {
      'paid': '确认付款',
      'shipped': '确认发货',
      'completed': '确认收货',
      'cancelled': '取消交易'
    }
    return actionTextMap[action] || action
  }

  // 如果正在加载，显示加载图标
  if (loading) {
    return <Spin style={{ marginTop: 100 }} />
  }
  
  // 如果交易详情不存在，显示交易不存在或无权查看提示
  if (!trade) {
    return <Empty description="交易不存在或无权查看" style={{ marginTop: 100 }} />
  }

  // 下面才写依赖trade的变量
  // 判断用户是否为买家
  const isBuyer = trade.buyer_id === user?.id;
  // 判断用户是否为卖家
  const isSeller = trade.seller_id === user?.id;
  // 判断是否可以进行评价
  const canEvaluate = !myEvaluation && ['shipped', 'delivered', 'completed'].includes(trade.status);
  // 获取用户对对方的评价
  const myToOtherEvaluation = myEvaluation;
  // 获取对方对用户的评价
  const otherToMeEvaluation = otherEvaluation;

  return (
    <div style={{ marginTop: 64, marginLeft: isAuthenticated ? 200 : 0, minHeight: 'calc(100vh - 64px)', padding: '24px' }}>
      {/* 使用Card组件包裹内容，设置标题和样式 */}
      <Card title="交易详情" style={{ maxWidth: 1000, margin: '0 auto' }}>
        <Row gutter={24}>
          <Col xs={24} md={16}>
            {/* 交易基本信息 */}
            <Card title="交易信息" size="small" style={{ marginBottom: 16 }}>
              {/* 使用Descriptions组件显示交易信息 */}
              <Descriptions column={2}>
                {/* 显示交易号 */}
                <Descriptions.Item label="交易号">{trade.trade_no}</Descriptions.Item>
                {/* 显示交易状态 */}
                <Descriptions.Item label="交易状态">
                  <Tag color={statusMap[trade.status]?.color} icon={statusMap[trade.status]?.icon}>
                    {statusMap[trade.status]?.text}
                  </Tag>
                </Descriptions.Item>
                {/* 显示交易金额 */}
                <Descriptions.Item label="交易金额">￥{trade.amount}</Descriptions.Item>
                {/* 显示支付方式 */}
                <Descriptions.Item label="支付方式">{trade.payment_method}</Descriptions.Item>
                {/* 显示交易创建时间 */}
                <Descriptions.Item label="创建时间">
                  {trade.createdAt?.slice(0, 19).replace('T', ' ')}
                </Descriptions.Item>
                {/* 如果有备注信息，显示备注 */}
                {trade.remark && (
                  <Descriptions.Item label="备注" span={2}>{trade.remark}</Descriptions.Item>
                )}
              </Descriptions>
            </Card>

            {/* 商品信息 */}
            <Card title="商品信息" size="small" style={{ marginBottom: 16 }}>
              <div>
                {/* 显示商品名称 */}
                <h4>{trade.Product?.name}</h4>
                {/* 显示商品描述 */}
                <p style={{ color: '#666' }}>{trade.Product?.description}</p>
                {/* 显示商品分类标签 */}
                <Tag color="blue">{trade.Product?.Category?.name}</Tag>
                {/* 显示商品成色标签 */}
                <Tag color={CONDITION_MAP[trade.Product?.condition_rating]?.color || 'default'}>
                  {CONDITION_MAP[trade.Product?.condition_rating]?.text || trade.Product?.condition_rating}
                </Tag>
              </div>
            </Card>

            {/* 用户信息 */}
            <Card title="用户信息" size="small">
              <Row gutter={16}>
                <Col span={12}>
                  {/* 显示买家信息标题 */}
                  <h5>买家信息</h5>
                  <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
                    {/* 显示买家头像或默认图标 */}
                    <Avatar src={trade.Buyer?.avatar_url} icon={<UserOutlined />} />
                    {/* 显示买家用户名 */}
                    <span style={{ marginLeft: 8 }}>{trade.Buyer?.username}</span>
                  </div>
                </Col>
                <Col span={12}>
                  {/* 显示卖家信息标题 */}
                  <h5>卖家信息</h5>
                  <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
                    {/* 显示卖家头像或默认图标 */}
                    <Avatar src={trade.Seller?.avatar_url} icon={<UserOutlined />} />
                    {/* 显示卖家用户名 */}
                    <span style={{ marginLeft: 8 }}>{trade.Seller?.username}</span>
                  </div>
                </Col>
              </Row>
            </Card>
          </Col>

          <Col xs={24} md={8}>
            {/* 操作面板 */}
            <Card title="交易操作" size="small" style={{ marginBottom: 16 }}>
              <Space direction="vertical" style={{ width: '100%' }}>
                {/* 遍历所有可执行操作，判断当前状态是否允许该操作 */}
                {Object.keys(statusFlows).map(action => (
                  statusFlows[action].includes(trade.status) && canPerformAction(action) && (
                    <Button
                      key={action}
                      type={action === 'cancelled' ? 'default' : 'primary'}
                      onClick={() => handleAction(action)}
                      block
                    >
                      {getActionButtonText(action)}
                    </Button>
                  )
                ))}
                {/* 返回交易列表按钮 */}
                <Button onClick={() => navigate('/trades')} block>
                  返回交易列表
                </Button>
              </Space>
            </Card>

            {/* 状态时间线 */}
            <Card title="状态记录" size="small">
              <Timeline>
                {/* 交易创建节点 */}
                <Timeline.Item color="green">
                  <p>交易创建</p>
                  <p style={{ fontSize: '12px', color: '#999' }}>
                    {trade.createdAt?.slice(0, 19).replace('T', ' ')}
                  </p>
                </Timeline.Item>
                {/* 交易进行节点 */}
                {['paid', 'shipped', 'delivered', 'completed'].includes(trade.status) && (
                  <Timeline.Item color="blue">
                    <p>交易进行</p>
                    <p style={{ fontSize: '12px', color: '#999' }}>
                      {/* 这里可用trade.updatedAt或其他合适时间 */}
                      {trade.updatedAt?.slice(0, 19).replace('T', ' ')}
                    </p>
                  </Timeline.Item>
                )}
                {/* 交易完成节点 */}
                {trade.status === 'completed' && (
                  <Timeline.Item color="green">
                    <p>交易完成</p>
                    <p style={{ fontSize: '12px', color: '#999' }}>
                      {trade.completed_at?.slice(0, 19).replace('T', ' ') || trade.updatedAt?.slice(0, 19).replace('T', ' ')}
                    </p>
                  </Timeline.Item>
                )}
                {/* 交易取消节点 */}
                {trade.cancelled_at && (
                  <Timeline.Item color="red">
                    <p>交易取消</p>
                    <p style={{ fontSize: '12px', color: '#999' }}>
                      {trade.cancelled_at?.slice(0, 19).replace('T', ' ')}
                    </p>
                  </Timeline.Item>
                )}
              </Timeline>
            </Card>
          </Col>
        </Row>
      </Card>

      {/* 操作确认弹窗 */}
      <Modal
        title={`确认${getActionButtonText(currentAction)}`}
        open={actionModalVisible}
        onCancel={() => setActionModalVisible(false)}
        footer={null}
        width={500}
      >
        <Form
          form={actionForm}
          layout="vertical"
          onFinish={handleActionSubmit}
        >
          {/* 备注信息表单字段 */}
          <Form.Item
            label="备注信息"
            name="reason"
          >
            <TextArea 
              rows={3} 
              placeholder={`可选：添加${getActionButtonText(currentAction)}的备注信息`}
              maxLength={200}
              showCount
            />
          </Form.Item>

          <div style={{ textAlign: 'right' }}>
            <Space>
              {/* 取消按钮 */}
              <Button onClick={() => setActionModalVisible(false)}>
                取消
              </Button>
              {/* 确认按钮 */}
              <Button 
                type="primary" 
                htmlType="submit"
                loading={actionLoading}
              >
                确认
              </Button>
            </Space>
          </div>
        </Form>
      </Modal>

      {/* 评价系统 */}
      <Card title="交易评价" style={{ maxWidth: 1000, margin: '24px auto 0' }} loading={evalLoading}>
        {/* 1. 本次交易互评表单 */}
        {canEvaluate && (
          <Form form={evalForm} layout="vertical" onFinish={handleEvalSubmit} style={{ maxWidth: 500, margin: '0 auto' }}>
            {/* 综合评分表单字段 */}
            <Form.Item label="综合评分" name="overall_score" rules={[{ required: true, message: '请打分' }]}> 
              <Rate allowHalf />
            </Form.Item>
            {/* 评价内容表单字段 */}
            <Form.Item label="评价内容" name="comment" rules={[{ required: true, message: '请输入评价内容' }]}> 
              <Input.TextArea rows={3} maxLength={200} showCount />
            </Form.Item>
            {/* 是否匿名评价表单字段 */}
            <Form.Item name="is_anonymous" valuePropName="checked" initialValue={false}>
              <Checkbox>匿名评价</Checkbox>
            </Form.Item>
            {/* 提交评价按钮 */}
            <Form.Item>
              <Button type="primary" htmlType="submit" loading={evalLoading}>提交评价</Button>
            </Form.Item>
          </Form>
        )}
        {/* 2. 本次交易评价展示 */}
        <div style={{ margin: '16px 0' }}>
          {/* 显示用户对对方的评价标题 */}
          <h4>{isBuyer ? '我对卖家的评价' : '我对买家的评价'}</h4>
          {myToOtherEvaluation ? (
            <div style={{ marginBottom: 12 }}>
              {/* 显示用户对对方的评价评分 */}
              <Rate value={Number(myToOtherEvaluation.overall_score)} disabled />
              {/* 显示评价者用户名或匿名 */}
              <span style={{ marginLeft: 8 }}>{myToOtherEvaluation.is_anonymous ? '匿名' : user.username}</span>
              {/* 显示评价内容 */}
              <div style={{ color: '#666', marginTop: 4 }}>{myToOtherEvaluation.comment}</div>
            </div>
          ) : <span style={{ color: '#aaa' }}>你还未评价</span>}
          {/* 显示对方对用户的评价标题 */}
          <h4>{isBuyer ? '卖家对我的评价' : '买家对我的评价'}</h4>
          {otherToMeEvaluation ? (
            <div style={{ marginBottom: 12 }}>
              {/* 显示对方对用户的评价评分 */}
              <Rate value={Number(otherToMeEvaluation.overall_score)} disabled />
              {/* 显示评价者用户名或匿名 */}
              <span style={{ marginLeft: 8 }}>{otherToMeEvaluation.is_anonymous ? '匿名' : (isBuyer ? trade.Seller?.username : trade.Buyer?.username)}</span>
              {/* 显示评价内容 */}
              <div style={{ color: '#666', marginTop: 4 }}>{otherToMeEvaluation.comment}</div>
            </div>
          ) : <span style={{ color: '#aaa' }}>对方还未评价</span>}
        </div>
        {/* 3. 历史评价展示 */}
        <Divider />
        {/* 显示对方历史评价标题 */}
        <h4>对方历史评价</h4>
        {historyEvaluations.length === 0 ? <span style={{ color: '#aaa' }}>暂无历史评价</span> : (
          <div>
            {historyEvaluations.map(ev => (
              <div key={ev.id} style={{ borderBottom: '1px solid #f0f0f0', padding: '8px 0' }}>
                {/* 显示历史评价评分 */}
                <Rate value={Number(ev.overall_score)} disabled />
                {/* 显示评价者用户名或匿名 */}
                <span style={{ marginLeft: 8 }}>{ev.is_anonymous ? '匿名' : ev.fromUser?.username}</span>
                {/* 显示评价内容 */}
                <div style={{ color: '#666', marginTop: 4 }}>{ev.comment}</div>
                {/* 显示评价创建时间 */}
                <div style={{ fontSize: 12, color: '#aaa' }}>{ev.created_at?.slice(0, 19).replace('T', ' ')}</div>
              </div>
            ))}
            {/* 历史评价分页组件 */}
            <Pagination
              current={historyPage}
              pageSize={5}
              total={historyTotal}
              onChange={setHistoryPage}
              style={{ marginTop: 12, textAlign: 'right' }}
              size="small"
            />
          </div>
        )}
      </Card>
    </div>
  )
}

// 导出交易详情页面组件
export default TradeDetailPage 